<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <script src="js/swiper-bundle.min.js"></script>
</head>
<style>
    html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper-container {
        width: 70%;
        height: 80%;
    }
    .main{
        position: relative;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 60px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);
        opacity: 0.6;
    }

    .swiper-slide-active,
    .swiper-slide-duplicate-active {
        transform: scale(1);
        z-index: 999;
        opacity: 1;
    }

    .swiper-slide div {
        width: 500px;
        height: 600px;
        /* background-color: #000; */
    }

    .con1 {
        background-color: #000;
    }

    .con2 {
        background-color: rgb(37, 31, 31);
    }

    .con3 {
        background-color: rgb(173, 50, 50);
    }

    .con4 {
        background-color: rgb(93, 158, 19);
    }

    .con5 {
        background-color: rgb(40, 206, 192);
    }

    .con6 {
        background-color: rgb(93, 19, 179);
    }

    .con7 {
        background-color: rgb(161, 17, 180);
    }

    .con8 {
        background-color: rgb(137, 180, 182);
    }

    .con9 {
        background-color: rgb(44, 7, 61);
    }

    .con10 {
        background-color: rgb(110, 64, 64);
    }

    .swiper-button-next {
        outline: none;
        position: absolute;
        right:140px ;
        display: none;
    }

    .swiper-button-prev {
        outline: none;
        position: absolute;
        left:140px ;
        display: none;
    }
</style>

<body>
    <!-- Swiper -->
    <div class="main">
        <div class="swiper-container get_job">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="con1"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con2"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con3"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con4"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con5"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con6"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con7"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con8"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con9"></div>
                </div>
                <div class="swiper-slide">
                    <div class="con10"></div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <script>
        var main = document.querySelector('.main');
        var next = document.querySelector(".swiper-button-next");
        var prev = document.querySelector(".swiper-button-prev");
        var container = document.querySelector('.swiper-container');
        main.addEventListener('mouseenter', function () {
            next.style.display = 'block';
            prev.style.display = 'block';
        })
        main.addEventListener('mouseleave', function () {
            next.style.display = 'none';
            prev.style.display = 'none';
        })
    </script>
    </div>
    <script>
        var swiper = new Swiper('.swiper-container', {
            // 能显示的个数
            slidesPerView: 3,
            spaceBetween: 30,
            centeredSlides: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>

</html>